<template>
  <div id="home">
    <div class="current">
      <div class="title">{{ date }}</div>
      <div>
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in epidemicData.currentData"
            :key="index"
            :span="8"
          >
            <div class="currentBg">
              <div class="colorDiv">{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="history">
      <div class="title">截止日期：{{ currentTime }}24时</div>
      <div>
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in epidemicData.historyData"
            :key="index"
            :span="8"
          >
            <div class="currentBg historyBg">
              <div class="colorDiv">{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="tableDiv">
      <div class="title">国内病例</div>
      <el-table
        :header-cell-style="cellClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <!-- 地区前面加序号 -->
        <el-table-column
          align="center"
          prop="province"
          label="地区"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="confirmed"
          label="新增确诊"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="suspected"
          label="新增疑似"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="dead"
          label="新增死亡"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="cure"
          label="新增治愈"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="outside"
          label="境外输入"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="severe"
          label="新增重症"
        ></el-table-column>
      </el-table>
    </div>
    <div class="articleDiv">
      <div class="title">最新进展</div>
      <div class="content">
        <!-- 列表展示区域 -->
        <div class="contentList">
          <div
            @click="
              currentArticle = item;
              dialogVisible = true;
            "
            v-for="(item, index) in listData"
            :key="item.id"
          >
            <div class="listHeader">
              <div class="circle"></div>
              <el-tag v-if="index == 0" size="mini" type="danger" effect="dark"
                >最新</el-tag
              >
              <span>{{
                moment(item.publishTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <div class="listContent">{{ item.title }}</div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="contentPage">
          <!-- background 给页数加一个背景 -->
          <el-pagination
            @current-change="currentChange"
            background
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="currentArticle.title"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div>
        {{ moment(currentArticle.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <!-- v-html可以将代码片段字符串设置到内部内容区 -->
      <span class="imgWidth" v-html="currentArticle.content"></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      dialogVisible: false,
      // 当前查看内容的资讯对象
      currentArticle: {},
      // 最新进展数据
      listData: [],
      // 进展数据总数
      total: 0,
      // 分页参数
      pageParam: {
        page: 1,
        pageSize: 10,
        categoryId: 3,
      },
      // 国内病例数据
      tableData: [],
      // 当天时间 new Date()

      currentTime: this.moment(new Date()).format("Y年M月D日"),
      date: this.moment(new Date()).format("Y年M月D日h:mm:ss"),
      // 当天疫情数据和历史疫情数据
      epidemicData: {
        currentData: [
          {
            name: "新增确诊",
            num: this.getRandom(5, 10),
          },
          {
            name: "本土新增",
            num: this.getRandom(0, 3),
          },
          {
            name: "境外输入",
            num: this.getRandom(0, 10),
          },
        ],
        historyData: [
          {
            name: "现有确诊",
            num: this.getRandom(10, 100),
          },
          {
            name: "现有重症",
            num: this.getRandom(10, 20),
          },
          {
            name: "累积境外输入",
            num: this.getRandom(500, 2000),
          },
          {
            name: "累积确诊",
            num: this.getRandom(80000, 100000),
          },
          {
            name: "累积出院",
            num: this.getRandom(70000, 80000),
          },
          {
            name: "累积死亡",
            num: this.getRandom(500, 1000),
          },
        ],
      },
    };
  },

  computed: {},
  methods: {
    moment,
    // 当前页发生变化
    currentChange(val) {
      this.pageParam.page = val;
      this.findArticle();
    },
    // 分页获取最新进展的资讯信息
    async findArticle() {
      let res = await axios.get("/article/pageQuery", {
        params: this.pageParam,
      });
      this.listData = res.data.list;
      this.total = res.data.total;
    },
    // 表格表头列背景
    cellClass({ columnIndex }) {
      // columnIndex是列索引，从0开始
      let color = "#e0e0fe";
      if (columnIndex == 1) color = "#DF837D";
      if (columnIndex == 2) color = "#F5D4A7";
      if (columnIndex == 3) color = "#FECCCA";
      if (columnIndex == 4) color = "#C4EBB2";
      if (columnIndex == 5) color = "#D2D2D2";
      if (columnIndex == 6) color = "#E5F2F2";
      // 序号、地区、新增确诊。。。新增重症的背景颜色
      return {
        backgroundColor: color,
        color: "#000",
        height: "30px",
      };
    },
    getRandom(num1, num2) {
      //40-200    0-160 + 40
      return Math.round(Math.random() * (num2 - num1) + num1);
    },
  },
  async created() {
    this.findArticle();
    let res = await axios.get("/epidemic/pageQuery", {
      params: { page: 1, pageSize: 20 },
    });
    this.tableData = res.data.list;
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = this.moment(new Date()).format("Y年M月D日hh:mm:ss"); // 修改数据date
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>
<style scoped>
/* 给home添加一个背景图片 */

.currentBg {
  background-color: #d5eff7;
  /* 新增确诊、本土新增、境外输入的背景色 */
  height: 100px;
  border-radius: 5px;
  /* 上下 左右 */
  padding: 20px 0;
  /* 设置 height为整个容器的高度 */
  box-sizing: border-box;
  text-align: center;
  line-height: 40px;
  /* 字体大小 */
  font-size: 15px;
  /* 字体加粗 */
  font-weight: bold;
  margin-bottom: 5px;
}
.historyBg {
  background-color: #f5e9f2;
  /* 现有确诊、现有重症、累积境外输入等背景色 */
}
.colorDiv {
  color: rgb(201, 8, 8);
  /* 新增确诊等现有确诊等数字颜色*/
}
.title {
  color: rgb(15, 15, 15);
  /* 1月7日、截止日期：1月7日24时、国内病例等字体颜色 */
  margin-bottom: 5px;
}
.contentList {
  /* background-color: skyblue; */
  /* 最新进展框背景色 */
  padding: 20px;
}
.listHeader > * {
  margin-right: 3px;
}
.listHeader > span:last-child {
  position: relative;
  top: 1px;
  font-size: 14px;
}
.circle {
  width: 10px;
  height: 10px;
  background-color: #4a0dbb;
  /* 最新进展下面小圆点颜色 */
  display: inline-block;
  border-radius: 50%;
}
.listContent {
  padding: 16px;
  border-radius: 5px;
  color: rgb(20, 13, 13);
  /* 最新进展框里面的字体颜色 */
  background-color: rgb(234, 240, 236);
  /* 最新进展里小框的背景颜色 */
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 10px;
}
/* 设置v-html字符串图片样式 */
.imgWidth img {
  width: 100%;
}
/* 给页面添加一个背景色 */
/* #home {
  background-color: rgb(210, 226, 231);
} */
</style>